import React from 'react';
import ConfigProvider from '../config-provider';
import classNames from 'classnames';
import {devWarning} from '../_utils/devUtils';

type TagSize = 'small' | 'middle' | 'large';
type TagColor = 'success' | 'info' | 'error' | 'warning' | 'default';
type TagShape = 'circle' | 'rect';

const closeSvg =
  <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    p-id="2793">
    <path
      d="M304.64 296.96c10.24-10.24 23.04-10.24 33.28-2.56l2.56 2.56 378.88 378.88c10.24 10.24 10.24 25.6 0 35.84-10.24 10.24-23.04 10.24-33.28 2.56l-2.56-2.56L304.64 332.8c-10.24-10.24-10.24-25.6 0-35.84z"
      fill="#666666" p-id="2794"></path>
    <path
      d="M719.36 296.96c-10.24-10.24-23.04-10.24-33.28-2.56l-2.56 2.56-378.88 378.88c-10.24 10.24-10.24 25.6 0 35.84 10.24 10.24 23.04 10.24 33.28 2.56l2.56-2.56L719.36 332.8c10.24-10.24 10.24-25.6 0-35.84z"
      fill="#666666" p-id="2795"></path>
  </svg>
;

interface TagProps {
  className?: string; // 样式名
  closable?: boolean; // 可关闭
  selectable?: boolean; // 可选择
  children?: React.ReactNode;
  icon?: React.ReactNode; // 图标
  size?: TagSize;
  onSelect?:(value: React.ReactNode, event:React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
  onClose?: (value: React.ReactNode, event:React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
  style?: React.CSSProperties;
  disabled?: boolean;
  color?: TagColor | string; // 彩色标签
  prefixCls?: string;
  shape?: TagShape;
  value?: string; // tag实际对应的值
}

const InternalTag = (props: TagProps, ref: unknown) => {
  const {
    className,
    closable,
    selectable = true,
    color = 'default',
    disabled,
    icon,
    size = 'middle',
    onClose,
    onSelect,
    style,
    prefixCls: customPrefixCls,
    children,
    shape = 'rect',
    value,
    ...others
  } = props;

  if (icon) {
    devWarning(InternalTag.displayName, '暂不支持Icon.');
  }

  const { getPrefixCls, prefixCls, size: contextSize } = React.useContext(ConfigProvider.ConfigContext);

  const tagPrefixCls = getPrefixCls!(prefixCls, 'tag', customPrefixCls);

  // ref
  const thisTagRef = React.useRef<HTMLElement>();
  const tagRef = ref as any || thisTagRef;

  // colorful
  const tagStyle: React.CSSProperties = {};
  const tagSize = props.size || contextSize;

  const handleClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
    if (!selectable) return;
    onSelect && onSelect(value || children, e);
  };

  const handleClose = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
    onClose && onClose(value || children, e);
    if (e.defaultPrevented) {
      return;
    }
  };

  if(color.startsWith('#')) {
    tagStyle.color = '#fff';
    tagStyle.backgroundColor = color;
  }

  const tagClasses = classNames(tagPrefixCls, className, {
    [`${tagPrefixCls}-shape-${shape}`]: shape,
    [`${tagPrefixCls}-color-${color}`]: color,
    [`${tagPrefixCls}-selectable`]: selectable,
    [`${tagPrefixCls}-closable`]: closable,
    [`${tagPrefixCls}-size-${size}`]: tagSize,
    [`${tagPrefixCls}-closable-disabled`]: closable && disabled,
  });



  const handleChild = function (child: React.ReactNode) {
    if (typeof child === 'string') {
      return <span className={`${tagPrefixCls}-text`}>{child}</span>;
    }
    return child;
  };

  const closeNode =
    closable ?
      <div className={`${tagPrefixCls}-closeWrapper`} onClick={ disabled ? undefined : handleClose}>
        {closeSvg}
      </div>
      : null;

  return <span ref={tagRef} onClick={handleClick} className={tagClasses} style={tagStyle} {...others}>
    {handleChild(children)}
    {closeNode}
  </span>;
};



const Tag = React.forwardRef<unknown, TagProps>(InternalTag);

InternalTag.displayName = 'Tag';
Tag.displayName = 'Tag';

export default Tag;
